🛞 Query Lifecycle

Tanstack Query는 서버 상태(Server State)를 관리하기 위해
쿼리의 생명주기(Query Lifecycle)에 따라 다양한 상태 값을 제공합니다.

이 상태들은 데이터 요청 → 캐싱 → refetch 과정에서 변화하며
이름 통해 로딩 상태, 에러 상태, 백그라운드 요청 상태 등을 쉽게 관리할 수 있습니다.

1️⃣ 쿼리 흐름

React Query의 기본적인 쿼리 흐름은 다음과 같습니다.

Component Mount
      ↓
Query 실행
      ↓
Loading 상태
      ↓
데이터 Fetch
      ↓
Success 상태
      ↓
Cache 저장
      ↓
Background Refetch 가능

React Query는 이 과정에서 여러 상태 값을 제공합니다.

2️⃣ Initial Fetch (첫 데이터 요청)

컴포넌트가 처음 렌더링되면 쿼리가 실행됩니다.

const { data, isLoading, isFetching } = useQuery(...)

이 시점의 상태

🔹 흐름

Component Mount
      ↓
Query 실행
      ↓
isLoading = true
isFetching = true
      ↓
데이터 요청 진행

예시

if (isLoading) {
  return <Spinner />
}

이 경우 페이저 전체 로딩 UI를 보여줄 때 사용합니다.

3️⃣ Fetch Success (데이터 요청 성공)

데이터 요청이 완료되면 React Query는 데이터를 캐시에 저장합니다.

이 시점의 상태

🔹 흐름

데이터 fetch 완료
      ↓
cache 저장
      ↓
isSuccess = true

이후 컴포넌트는 캐시에 저장된 데이터를 사용합니다.

4️⃣ Background Fetch (백그라운드 요청)

React Query는 캐시된 데이터를 사용하면서도
필요한 경우 백그라운드에서 데이터를 다시 요청(refetch) 합니다.

예

• window focus
• network reconnect
• refetchInterval

이 경우 상태

🔹 흐름

이미 데이터 존재
      ↓
refetch 발생
      ↓
isFetching = true
isRefetching = true
      ↓
데이터 업데이트

예시

{isFetching && <LoadingIndicator />}

이 경우 작은 로딩 UI를 표시할 때 사용합니다.

5️⃣ Error State (요청 실패)

데이터 요청이 실패하면 다음 상태가 됩니다.

예시

if (isError) {
  return <ErrorMessage />
}

6️⃣ isLoading vs isFetching

예

첫 페이지 요청
isLoading = true
isFetching = true

추가 요청
isLoading = false
isFetching = true

7️⃣ 전체 Lifecycle 흐름

Component Mount
      ↓
Query 실행
      ↓
isLoading = true
isFetching = true
      ↓
데이터 fetch
      ↓
isSuccess = true
      ↓
Cache 저장
      ↓
Background Refetch
      ↓
isFetching = true
isRefetching = true
      ↓
데이터 업데이트

✍️ 한 줄 정리

React Query는 쿼리의 lifecycle에 따라 다양한 상태 값을 제공하며
이를 통해 데이터 요청, 캐싱, refetch 상태를 효율적으로 관리할 수 있습니다.